<template>
	<view class="content">
		<scroll-view class="time-line-wrap">
			<view class="time-line">
				<!-- 时间轴 -->
				<view class="time-line-container" :class="addTypeClass">
					<!-- 时间轴内容块列表 -->
					<view class="time-line-list">

						<!-- 时间轴内容块 -->
						<view class="time-line-info" :key="index" :class="[layoutClass(index)]" :id="'timeline'+index"
							v-for="(item,index) of time_line_list">


							<!-- 内容块内容 -->
							<view class="line-info-content">

								<!-- 时间轴圆点 -->
								<view class="line-on-round"
									:style="{ opacity: current[index]&&current[index].is=='ok'?1:0,top:'12rpx'}"
									:class="current[index]&&current[index].is=='ok'?comeani:''"></view>

								<view class="info-content-wrap"
									:style="{ opacity: current[index]&&current[index].is=='ok'?1:0}"
									:class="current[index]&&current[index].is=='ok'?comeani:''">
									<!-- 标题 -->
									<view class="info-title">
										{{item.title}}
									</view>
									
									<!-- 内容 -->
									<view class="info-content" v-for="(tripItem,id) in item.tripInfo" :key='id' @click="pageJump(tripItem)">
										<view class="jg_bg">
											<view class="title_content">
												<view class="title_type">
													<u-icon name="home-fill" color="#FF9800" size="22"></u-icon>
													<text>住宿</text>
												</view>
												<u--text :bold='true' size='16' :text="tripItem.title"></u--text>
												<text>开放时间：全天开放</text>
											</view>
											<image :src="tripItem.thumb" mode=""></image>
										</view>
										<view class="kc_bg">
											<text @click.stop="navigation">导航</text>
											<view class="share">
												<u--text text="分享到微信" openType="share" type="success" @click.stop="clickHandler"></u--text>
											</view>
											
										</view>
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 数据
				time_line_list: [{
						title: '6月',
						tripInfo:[
							{
								thumb: "https://www.zhuinw.com/uploads/20210816/ef73469fd86f19ac1fba0b540502c42f.jpg",
								title:"泰康之家·大清谷",
								price:'7500~15000月',
								content:"浙江省杭州市西湖区清谷路333号",
								date:'2022年5月20日',
								longitude:106.593774,
								latitude:29.418686,
								markers:[
									{
										latitude:29.418686,
										longitude:106.593774,
										// iconPath:'https://www.zhuinw.com/uploads/20210816/ef73469fd86f19ac1fba0b540502c42f.jpg',
										width:20,
									}
								]
							},
							{
								thumb: "https://www.zhuinw.com/uploads/20210719/9eecaa4eebd1efadc3d2282dcdd58c18.jpg",
								title:"上海云栖兰亭养老社区",
								price:'5000~10000月',
								content:"上海市浦东新区宣桥镇宣中路298号",
								date:'2022年5月20日',
								longitude:106.593774,
								latitude:29.418686,
								markers:[
									{
										latitude:29.418686,
										longitude:106.593774,
										// iconPath:'https://www.zhuinw.com/uploads/20210719/9eecaa4eebd1efadc3d2282dcdd58c18.jpg',
										width:20,
									}
								]
							},
							{
								thumb: "https://www.zhuinw.com/uploads/20200704/8e7000ca7bbd61e1d6f6c5916ad7595c.jpg",
								title:"重庆尚善养老院",
								price:'2300~6500月',
								content:"重庆市南岸区南山公园路118号",
								date:'2022年5月20日',
								longitude:106.593774,
								latitude:29.418686,
								markers:[
									{
										latitude:29.418686,
										longitude:106.593774,
										// iconPath:'https://www.zhuinw.com/uploads/20200704/8e7000ca7bbd61e1d6f6c5916ad7595c.jpg',
										width:20,
									}
								]
							}
						]
					},
					{
						title: '2020年12月',
						tripInfo:[
							{
								thumb: "https://www.zhuinw.com/uploads/20210719/9eecaa4eebd1efadc3d2282dcdd58c18.jpg",
								title:"上海云栖兰亭养老社区",
								price:'5000~10000月',
								content:"上海市浦东新区宣桥镇宣中路298号",
								date:'2022年5月20日',
								longitude:106.593774,
								latitude:29.418686,
								markers:[
									{
										latitude:29.418686,
										longitude:106.593774,
										// iconPath:'https://www.zhuinw.com/uploads/20210719/9eecaa4eebd1efadc3d2282dcdd58c18.jpg',
										width:20,
									}
								]
							},
							{
								thumb: "https://www.zhuinw.com/uploads/20200704/8e7000ca7bbd61e1d6f6c5916ad7595c.jpg",
								title:"重庆尚善养老院",
								price:'2300~6500月',
								content:"重庆市南岸区南山公园路118号",
								date:'2022年5月20日',
								longitude:106.593774,
								latitude:29.418686,
								markers:[
									{
										latitude:29.418686,
										longitude:106.593774,
										// iconPath:'https://www.zhuinw.com/uploads/20200704/8e7000ca7bbd61e1d6f6c5916ad7595c.jpg',s
										width:20,
									}
								]
							}
						]
					},
				],
				HEIGHT: 0, //屏幕高度
				result: [], //监听的结果
				current: [], //当前在屏幕内的
				sum: 0, //加载完成个数
				comeani: 'come-ani', //入场动画
				isScroll: true, //是否加载动画
				// tripList:[
				// 	{
				// 		title:'慧康通养老院',
				// 		img:'../../static/indent_images/YL1.jpg',
				// 		url:''
				// 	},
				// 	{
				// 		title:'慧康通养老院',
				// 		img:'../../static/indent_images/YL1.jpg',
				// 		url:''
				// 	},
				// 	{
				// 		title:'慧康通养老院',
				// 		img:'../../static/indent_images/YL1.jpg',
				// 		url:''
				// 	}
				// ]
			}
		},
		props: {
			location: {
				type: String,
				default: 'center',
			},
		 title: {
				type: String,
				default: '时间轴'
			},
		},
		computed: {
			addTypeClass() {
				let _class = "";
				let arrType = ["left", "right", "center"];
				if (arrType.indexOf(this.location) !== -1 && this.location !== 'center') {
					_class += this.location + "-time-line";
				}
				return _class;
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				try {
					// 获取屏幕高度
					const res = uni.getSystemInfoSync();
					this.HEIGHT = res.screenHeight;
					// 添加标志位
					for (let i = 0; i < this.time_line_list.length; i++) {
						this.current.push({
							tag: 'timeline' + i,
							is: 'no'
						});
		 		}
					// 开始获取位置信息
					this.getScroll();
				} catch (e) {
					// error
				}

			},
			loadani() {
				for (let i = 0; i < this.result.length; i++) {
					for (let j = 0; j < this.result[i].info.length; j++) {
						// 是否没加载动画
						if (this.current[j].is != 'ok') {
							// 是否进入视野
							if (this.current[j].tag == this.result[i].info[j].tag &&
								this.result[i].info[j].domTop + 90 < this.HEIGHT) {
								// 加载动画
								this.current[j].is = 'ok';
								this.sum = j + 1;
							}
						}
					}
					// 移除当前
					this.result.splice(i, 1);
				}
				// 是否全部加载完成
				if (this.sum == this.time_line_list.length) {
					this.isScroll = false;
				}
			},
			async getScroll() {
				if (!this.isScroll) {
					return;
				}
				let info = [];
				// 返回位置信息加入数组
				for (let i = 0; i < this.time_line_list.length; i++) {
					await this.getNodeList('timeline' + i, i).then(res => {
						info.push(res);
					});
				}
				this.result.push({
					info: info
				});
				// 加载动画
				this.loadani();
			},
			getNodeList(id, i) {
				// 获取位置信息并返回
				return new Promise(resolve => {
					const query = uni.createSelectorQuery().in(this);
					query.select('#' + id).boundingClientRect(data => {
						// console.log("得到布局位置信息" + JSON.stringify(data));
						// console.log("节点离页面顶部的距离为" + data.top);
						resolve({
							domInfo: data.height,
							domTop: data.top,
							tag: id
						})
					}).exec();
		 	});
			},
			// 添加动画
			layoutClass(index) {
				let _class = "";
				if (this.location == 'center' && index % 2 != 0) {
					_class = 'right-info';
				}
				return _class;
			},
			//页面跳转并传递参数
			pageJump(tripItem){
				var tripData=JSON.stringify(tripItem)
				console.log(tripItem)
				uni.navigateTo({
					url:'../detailsTrip/detailsTrip?Data='+tripData
				})
			},
			
			//导航
			navigation(){
				// 跳转地图获取定位
				// uni.chooseLocation({
				// 	success: function (res) {
				// 		console.log('位置名称：' + res.name);
				// 		console.log('详细地址：' + res.address);
				// 		console.log('纬度：' + res.latitude);
				// 		console.log('经度：' + res.longitude);
				// 	}
				// });
				wx.getLocation({//获取当前经纬度
				      type: 'wgs84', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息  
				      success: function (res) {
				        wx.openLocation({//​使用微信内置地图查看位置。
				          latitude: 22.5542080000,//要去的纬度-地址
				          longitude: 113.8878770000,//要去的经度-地址
				          name: "宝安中心A地铁口",
				          address:'宝安中心A地铁口'
				        })
				      }
				    });
				
			},
			//分享至微信
			clickHandler() {
				// #ifndef MP-WEIXIN
				uni.$u.toast('请在微信小程序内查看效果');
				// #endif
			}
		},
	}
</script>

<style lang="scss" scoped>
	// 
	.bmjg {
		font-size: 24rpx;
		color: #757575;
		margin-top: 20rpx;
	}

	.bmjg>text {
		color: #FF9800;
	}

	.jg_bg {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		// border-bottom: 2rpx solid #EAEAEA;
		.title_content{
			line-height: 50rpx;
			padding: 30rpx;
			.title_type{
				display: flex;
				margin-bottom: 10px;
				text{
					margin-left: 5px;
					color: #3B3B3B;
					font-weight: 600;
				}
			}

			text{
				font-size: 28rpx;
				color: #3B3B3B;
			}
		}
		image{
			width: 30%;
			height: 250rpx;
			border-top-right-radius: 20rpx;
		}
	}


	.kc_bg {
		height: 70rpx;
		border-top: 2rpx solid #EAEAEA;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		text{
			padding:40rpx;
			font-size: 28rpx;
			font-weight: 700;
			text-align: center;
			color: #FF9800;
		}
		.share{
			/deep/ .u-text{
				button{
					border: nonde;
					background: none;
					color:#FF9800;
				}
				button::after{
				      border: none;  
				}
			}
		}
	}



	// 
	.time-line-wrap {
		width: 100%;
		overflow-x: hidden;
	}

	.time-line-wrap {
		font-family: sans-serif;

		.time-line {
			padding: 4% 1%;

			.time-line-title {
				font-size: 25rpx;
				font-weight: 800;
				text-align: center;
				margin-bottom: 15rpx;
			}

			// 中间的轴
			.time-line-container {
				padding: 3% 1%;
				position: relative;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					margin: 0 auto;
					height: 100%;
					width: 4rpx;
					background: #BBBBBB;
				}

				.time-line-list {
					width: 98%;

					.time-line-info {
						position: relative;

						.line-info-content {
							will-change: auto;
							width: 43%;
							display: flex;
							flex-direction: column;

							.line-on-round {
								height: 20rpx;
								width: 20rpx;
								border: 4rpx solid #E18427;
								border-radius: 50%;
								background: #fff;
								position: absolute;
								left: 0;
								right: 0;
								margin: 0 auto;
								top: 50rpx;
								box-shadow: 0rpx 2rpx 1rpx 1rpx rgba(0, 0, 0, .1);
								z-index: 10;

								&.come-ani {
									animation: come-round .8s ease-in-out;
								}
							}

							.info-content-wrap {
								position: relative;

								.info-title {
									min-height: 30rpx;
									word-break: break-word;
									text-align: right;
									margin: 5rpx 0;
									font-size: 34rrpx;
									font-weight: 500;
									color: #E18427;
									font-weight: bold;
								}

								.info-content {
									box-shadow: 1rpx 1rpx 1rpx 1rpx #d7e4ed;
									border-radius: 20rpx;
									// padding-bottom: 20rpx;
									min-height: 40rpx;
									position: relative;
									margin-top: 20rpx;
									background: #FFFFFF;
									.info-txt {}

									// &::before{
									//     content: '';
									//     border: 7rpx solid;
									//     border-color: transparent transparent transparent #aaa;
									//     position: absolute;
									//     left: 100%;
									//     top: 18rpx;
									// }
								}

								&.come-ani {
									animation: come-in-left .6s ease-in-out;
								}
							}
						}
					}

					.right-info {
						transform: rotateY(180deg);

						.line-info-content {
							.info-content-wrap {
								.info-title {
									transform: rotateY(180deg);
									text-align: left;
								}

								.info-content {
									.info-txt {
										transform: rotateY(180deg)
									}
								}
							}
						}
					}
				}
			}

			// 轴在左边
			.left-time-line {
				&::before {
					margin: 0;
					left: 15rpx;
				}

				.time-line-list {
					.time-line-info {
						.line-info-content {
							width: auto;

							.line-on-round {
								left: -4rpx;
								margin: 0;
							}

							.info-content-wrap {
								margin-left: 45rpx;
								margin-bottom: 15rpx;

								.info-title {
									text-align: left;
								}

								.info-content {
									&::before {
										border-color: transparent #aaa transparent transparent;
										left: -15rpx;
									}
								}

								&.come-ani {
									animation: come-in-right .6s ease-in-out;
								}
							}
						}
					}
				}
			}

			// 轴在右边
			.right-time-line {
				&::before {
					margin: 0;
					left: 92.8%;
				}

				.time-line-list {
					.time-line-info {
						.line-info-content {
							width: auto;

							.line-on-round {
								left: 90%;
								margin: 0;
							}

							.info-content-wrap {
								margin-right: 55rpx;
								margin-bottom: 15rpx;

								.info-content {
									&::before {
										border-color: transparent transparent transparent #aaa;
									}
								}

							}
						}
					}
				}
			}
		}
	}

	@keyframes come-in-left {
		0% {
			transform: translateX(-120%);
		}

		70% {
			transform: translateX(8%);
		}

		100% {
			transform: translateX(0);
		}
	}

	@keyframes come-in-right {
		0% {
			transform: translateX(120%);
		}

		70% {
			transform: translateX(-8%);
		}

		100% {
			transform: translateX(0);
		}
	}

	@keyframes come-round {
		0% {
			transform: scale(0);
			opacity: 0;
		}

		40% {
			opacity: 0;
		}

		60% {
			transform: scale(1.2);
		}

		100% {
			transform: scale(1);
		}
	}
</style>
